<template>
  <div class="view-container workOvertimeList">
<!--    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>请假管理</span>
        </div>
        <div class="header-form">
          &lt;!&ndash;        <div class="header-form">

                      <el-dropdown @command="handleCommand">
                        <el-button type="default" :loading="delLoading">
                          更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新
                          </el-dropdown-item>
                          <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                          <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>&ndash;&gt;
          <div class="header-form-item">
            <el-button icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
          </div>
          <div class="header-form-item">
            <el-button icon="el-icon-edit" @click="edit">编辑</el-button>
          </div>
          <div class="header-form-item">
            <el-button type="danger" :loading="delLoading" icon="el-icon-delete" @click="del">{{isBatchesDel}}</el-button>
          </div>
          &lt;!&ndash;搜索&ndash;&gt;
          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
          <div class="header-form-item">
            <el-button type="success" icon="el-icon-notebook-2" @click="open">请假申请</el-button>
          </div>
        </div>
      </div>
    </header>-->
<!--    <view-header
    @refresh="refresh"
    @edit="openEditDialog"
    :delLoading="delLoading"
    :isBatchesDel="isBatchesDel"
    :title="'请假管理'"
    :applyLabel="'请假申请'"
    @del="del"
    @fetchData="fetchData"
    @openDialog="openDialog"
    ></view-header>-->
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>请假管理</span>
        </div>
        <div class="header-form">
          <!--更多-->
          <!--          <div class="header-form-item">
                      <el-dropdown @command="handleCommand">
                        <el-button type="default" :loading="delLoading">
                          更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新
                          </el-dropdown-item>
                          <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                          <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>-->
          <!--          <div class="header-form-item">
                      <el-button icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
                    </div>-->
          <div class="header-form-item">
            <el-button icon="el-icon-edit" @click="openEditDialog(true)">编辑</el-button>
          </div>
          <div class="header-form-item">
            <el-button type="danger" :loading="delLoading" icon="el-icon-delete" @click="del">{{isBatchesDel}}</el-button>
          </div>
          <!--搜索-->
          <!--          <div class="header-form-item">
                      <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
                    </div>-->
          <div class="header-form-item">
            <el-button type="success" icon="el-icon-notebook-2" @click="openEditDialog(false)">请假申请</el-button>
          </div>
        </div>
      </div>
    </header>
    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="qingJiaRenName" label="请假人" align="center" width="100"/>
        <el-table-column prop="qjyy" label="请假原因" align="left">
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.qingJiaId)">{{s.row.qjyy}}</el-link>
          </template>
        </el-table-column>
        <el-table-column sortable prop="qjtype" label="请假类型" align="center" width="110"/>
        <el-table-column sortable prop="qjstime" label="开始时间" :formatter="qjstimeFmt" width="150" align="center"/>
        <el-table-column sortable prop="qjetime" label="结束时间" :formatter="qjetimeFmt" width="150" align="center"/>
        <el-table-column prop="stateName" label="状态" align="center" width="100">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <qing-jia-save ref="save-page" @update="fetchData"></qing-jia-save>
  </div>
</template>

<script>
  import qingJiaAPI from '@/api/qingJia/qingJia'
  import QingJiaSave from './QingJiaSave'
  import listMixin from '@/mixin/listMixin'
  import flowManagerListMixin from '@/mixin/flowManagerListMixin'
  import ViewHeader from '@/common/FlowManagerListHeader'
  export default {
    name: 'QingJiaList',
    components: { QingJiaSave, ViewHeader},
    mixins: [listMixin,flowManagerListMixin],
    data() {
      return {
/*        qingJia: {
          auditorIdList: [],
          qjetime: '',
          qjstime: '',
          qjtype: '',
          qjyy: '',
          qingJiaRenId: '',
          qingJiaId: '',
          qingJiaRenName: '',
          stateName: ''
        },*/
        mixinParams: {
          addUrl: '',
          editUrl: '',
          propertyName: 'qingJiaId',
          API: qingJiaAPI
        }
      }
    },
    created() {
    },
    computed: {},
    methods: {
      edit(){
        this.openEditDialog()
      },
      showDetail(id) {
        this.$router.push('/work-qingjia/approval-detail/' + id + '/' + false)
      },
      openEditDialog() {
        this.$refs['save-page'].open(this.multipleSelected[0])
      },
      update() {
        this.fetchData()
      },
      fetchData() {
        qingJiaAPI.list(this.page).then(res => {
          console.log(res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      qjstimeFmt(row) {
        return this._util.format(row.qjstime)
      },
      qjetimeFmt(row) {
        return this._util.format(row.qjetime)
      }
    }

  }
</script>

<style lang="scss">

  .workOvertimeList {
    .el-dialog {
      width: 550px;

      .el-dialog__footer {
        padding: 10px 45px;
      }
    }
  }

</style>

